Selection deleted
<h3 class="text-xl font-bold mb-2">School Grade Program</h3>
<div class="border p-4 mb-4">
<p>
This Python program calculates the average marks and assigns a grade based on the USIU grading system.
</p>
<h2>USIU Grading System</h2>
<ul>
<li>90 - 100: A</li>
<li>70 - 89: B</li>
<li>65 - 69: C</li>
<li>50 - 64: D</li>
<li>0 - 49: F</li>
</ul>
<h2>Functionalities</h2>
<ul>
<li>Calculates grade based on average marks.</li>
<li>Handles invalid marks inputs.</li>
<li>Allows termination of the program.</li>
</ul>
<h2>Usage</h2>
<p>
The program prompts the user to enter marks for subjects, calculates the average, determines the grade,
and
offers the option to terminate.
</p>
<h2>Sample Output</h2>
<p>
Average marks: 75.50<br>
Grade: B
</p>
</div>
<script>
// JavaScript can be added here for additional interactivity or functionality
</script>
<button onclick="window.location.href='https://www.programiz.com/python-programming/online-compiler/'"
class="mt-2 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700">View Code</button>
</div>
<!-- Login Interface -->
<div class="border p-4 mb-4">
<h3 class="text-xl font-bold mb-2">Login Interface</h3>
<p>A simple login interface implemented using HTML, CSS, and JavaScript.</p>
<p>
This Flask application provides a secure login interface with user registration, email verification,
password
hashing, OTP (One-Time Password) verification, and account deactivation features.
</p>
<h2>Features</h2>
<ul>
<li>User Registration: Users can register by providing a valid email and password.</li>
<li>Email Verification: Accounts require email verification to activate.</li>
External page
Selection deleted
.container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}
/* Header Section */
#header {
padding: 40px 0;
text-align: center;
background-color: #f0f0f0;
}
#header h1 {
font-size: 2.5rem;
margin-bottom: 15px;
}
#header p {
font-size: 1.1rem;
color: #777;
}
/* Colors (if needed) */
:root {
--primary-color: #your-primary-color; /* Modify as needed */
--secondary-color: #your-secondary-color; /* Modify as needed */
}
/* Fonts */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* ... other portfolio styles ... */
/* Resume Section */
.resume {
width: 60%; /* Adjust width as needed */
margin: 0 auto; /* Centers the container horizontally */
padding: 20px;
border: 1px solid #ddd; /* Optional border */
}
.resume h2 {
font-size: 20px; /* Adjust as needed */
margin-bottom: 10px;
}
.resume .content {
font-size: 16px; /* Adjust as needed */
line-height: 1.5;
}
.resume .contact-info,
.resume .skills,
.resume .education {
margin-top: 20px;
}
.resume a:hover {
background-color: var(--primary-color); /* Use defined color */
}
/* Media queries (optional adjustments for smaller screens) */
/* Section Styles */
section {
margin-bottom: 50px;
}
.section-title {
font-size: 2rem;
font-weight: bold;
color: #333;
margin-bottom: 20px;
text-decoration: underline;
}
/* Project Card Styles */
.project-card {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-bottom: 20px;
transition: transform 0.3s ease-in-out;
}
.project-card:hover {
transform: translateY(-5px);
}
.project-title {
font-size: 1.3rem;
font-weight: bold;
color: #333;
margin-bottom: 10px;
}
.project-description {
color: #555;
margin-bottom: 15px;
}
.project-link {
display: inline-block;
background-color: #2196f3;
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './Components/App.jsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
import React from 'react';
import Nbar from './inc/Nbar';
import Home from './pages/Home';
import About from './pages/About';
import Project from './pages/Project';
import Contact from './pages/Contact';
import Footer from './pages/Footer';
function App() {
return (
<div>
<Nbar />
<section id='home'>
<Home />
</section>
<section id='about'>
<About />
</section>
<section id='projects'>
<Project />
</section>
<section id='contact'>
<Contact />
</section>
<Footer />
</div>
)
}
export default App
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
{
"name": "Jzsgameortfolio-2.0",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.4.2",
"@fortawesome/free-brands-svg-icons": "^6.4.2",
"@fortawesome/free-regular-svg-icons": "^6.4.2",
"@fortawesome/free-solid-svg-icons": "^6.4.2",
"@fortawesome/react-fontawesome": "^0.2.0",
"bootstrap": "^5.3.2",
"react": "^18.2.0",
"react-bootstrap": "^2.9.1",
"react-dom": "^18.2.0",
"react-scroll": "^1.9.0"
},
"devDependencies": {
"@types/react": "^18.2.37",
"@types/react-dom": "^18.2.15",
"@vitejs/plugin-react": "^4.2.0",
"eslint": "^8.53.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.4",
"vite": "^5.0.0"
}
}


